<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" href="../../css/animate.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css/mescroll.css">
  <link rel="stylesheet" href="../../css/gloab.css">
  <title>置顶</title>
  <style media="screen">
    input {
    display: inline-block;
    vertical-align: middle;
    /* 当成为行内块元素时它就可以垂直居中了 */
    width: 15px;
    height: 15px;
    -webkit-appearance: none;
    /* 清除原有的样式 */
    background-color: transparent;
    border: 0;
    outline: 0 !important;
    /* 去掉点击后外面可能会出现的蓝框 */
    line-height: 15px;
    color: #d8d8d8;
    }
    input:after {
    /* //在input的内容之后插入新内容 */
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 8px;
    font-size: 10px;
    color: #fff;
    border: 4px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
    /* 规定两个并排的带边框的框 */
    }
    input:checked:after {
    /* 选中之后的样子 */
    content: "L";
    transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
    括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
    -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    border-color: #3f80cc;
    background-color: #3f80cc;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="public-header">
      <div id="statusbar"></div>
      <header class="public-header">
        <div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
        <div class="public-header-title">置顶</div>
      </header>
    </div>
    <div class="wystt">
      <div class="wystt-choose-text">
        <div class="wystt-choose-text-title">请选择置顶天数</div>
        <div class="wystt-choose-text-list flex wrap" v-if="config&&config.length>0">
          <div class="wystt-choose-text-son1" v-for="(item,index) in config" :style="index%3==0?'width:30%;':'margin-left:5%;width:30%;'">
            <input type="radio" name="days" :value="index" v-model="days" @change="getPrices(item.price,item.day)">
            <span style="display:inine-block;width:100%;">{{item.day}}天</span>
          </div>
        </div>
      </div>
      <div class="wystt-pay-btn" @click="pay">立即支付(￥{{prices}})</div>
    </div>
  </div>
  <div class="public-progress" style="z-index:9;">
   <img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/mescroll.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/jsencrypt.js"></script>
<script src="../../script/fastclick.js"></script>

<script>
var vm;
var mescroll;
var mySwiper;
apiready=function(){
  api.removeLaunchView();
  setBar("statusbar");
  setFont(750);
  startVue();
  $(".public-progress").fadeOut(1000);
  setTimeout(function(){
    $(".public-progress").css({"display":"none"});
  },1000);
}
function startVue(){
  vm = new Vue({
    el:"#app",
    data:{
      gdtt:["","","",""],
      num1:0,
      adList:[],
      ad:'',
      config:[],
      days:'0',
      price:'',
      prices:'10.00',
      queue:[],
      ranks:'',
      Identity:'',
	  day:0,
    },
    created:function(){
      this.gudingConfig();
      this.getUserInfo();
    },
    methods:{
      //立即支付
      pay:function(){
        if(api.pageParam.id==""){
          msg('置顶广告为空');
          return;
        }
        var dialogBox = api.require('dialogBox');
        dialogBox.alert({
            texts: {
                content: '置顶该广告将支付'+vm.prices+'元是否置顶？',
                leftBtnTitle: '取消',
                rightBtnTitle: '确认'
            },
            styles: {
                bg: '#fff',
                w: 300,
                corner:2,
                content: {
                    color: '#000',
                    size: 14
                },
                left: {
                    marginB: 7,
                    marginL: 20,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#fff',
                    size: 12
                },
                right: {
                    marginB: 7,
                    marginL: 10,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#fff',
                    size: 12
                }
            }
        }, function(ret) {
            if (ret.eventType == 'left') {
                var dialogBox = api.require('dialogBox');
                dialogBox.close({
                    dialogName: 'alert'
                });
            }else if(ret.eventType == 'right'){
              var dialogBox = api.require('dialogBox');
              dialogBox.close({
                  dialogName: 'alert'
              });
              api.ajax({
                  url: apiUrl+'/api/user/buyDays',
                  method: 'post',
                  data: {
                      values: {
                        id:api.pageParam.id,
                        day:vm.day,
						type:"top",
						token:$api.getStorage("token")
                      },
                  }
              },function(ret, err){
                  if (ret.code==1) {
                    api.openWin({
                        name: 'pay',
                        url: '../home/pay.html',
                        pageParam: {
                          release_price:vm.prices,
                          types:6,
						  type:6,
                          ad:api.pageParam.id,
                        }
                    });
                  }else{
                    msg(ret.msg);
                  }
                })
            }
        });
      },
      getPrices:function(index,day){
        // vm.prices = parseInt(vm.price)*parseInt(vm.config[vm.num1].days);
        vm.prices = index;
		vm.day=day;
      },
      //获取置顶费用
      getPrice:function(){
        api.ajax({
            url: apiUrl+'api/home/getPrice',
            method: 'post',
            data: {
                values: {
                },
            }
        },function(ret, err){
            if (ret.status) {
              vm.price = ret.data;
              vm.amount = ret.price;
              if (vm.Identity==2) {
                vm.prices = (parseInt(ret.data)*parseInt(vm.config[vm.num1].days)*vm.amount/100).toFixed(2);
              }else{
                vm.prices = (parseInt(ret.data)*parseInt(vm.config[vm.num1].days)).toFixed(2);
              }
            }
        });
      },
      // 固顶配置
      gudingConfig:function(){
        api.ajax({
            url: apiUrl+'/api/index/topSetting',
            method: 'post',
            data: {
                values: {
                },
            }
        },function(ret, err){
			console.log(JSON.stringify(ret))
            if (ret.code==1) {
              vm.config = ret.data;
			  vm.price=3;
              vm.getPrice();
            } else {
              vm.config = ret.data;
            }
        });
      },
      getUserInfo:function(){
        api.ajax({
            url: apiUrl+'api/users/getUserInfo',
            method: 'post',
            data: {
                values: {
                    uid: post_en($api.getStorage('uid')),
                },
            }
        },function(ret, err){
            if (ret.status) {
              vm.Identity = ret.data['Identity'];
              vm.ranks = ret.data['ranks'];
            } else {
              vm.Identity = "";
              vm.ranks = "";
            }
        });

      },
    }
  })
}
</script>
</html>
